<template>
    <div class="container">
        <div class="head">
            <div class="left">
                用户群分析 > 用户群流量分析
            </div>
            <div class="right">
                <div class="data">
                    <div class="title" style="font-size:medium ; color:#1665dc; text-align: center;">
                        2020.02.16 ~
                        2020.02.19
                    </div>
                    <el-icon style="color:#1665dc; margin-top: 5px;">
                        <CaretBottom />
                    </el-icon>

                </div>
                <!-- <datapicker></datapicker> -->
                <div class="butt">
                    <button>
                        <el-icon>
                            <Refresh />
                        </el-icon>刷新
                    </button>
                    <button>
                        <el-icon>
                            <Download />
                        </el-icon>导出
                    </button>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="bingtu">
                <div class="title" style="color:#000; text-align: center; background-color: #fff; padding-top: 20px;">
                    用户群流量占比</div>
                <bingtu></bingtu>
            </div>

            <div class="middle">
                <div class="title" style="color:#000; text-align: center; background-color: #fff; padding-top: 20px;">
                    用户群流量分布</div>
                <zhuzhuangtu></zhuzhuangtu>
            </div>

            <div class="tiaotu">
                <div class="title" style="color:#000; text-align: center; background-color: #fff; padding-top: 20px;">
                    用户群流量趋势</div>
                <tiao></tiao>
            </div>
        </div>
        <div class="FooterButton">
            <PageFooter></PageFooter>
        </div>

        <div class="footer">
            <div class="left">
                <text style="margin-left:20px;">总条数：7</text>
                <text style="margin-left:20px;">总页数：1</text>
            </div>
            <div class="number">
                <text>上一页</text>
                <el-button type="primary" style=" width:5px; height:20px;">1</el-button>
                <text>下一页</text>
                <div class="jump">
                    跳至 <input v-model="message" style="width: 50px; height: 20px;" /> 页

                   
                        <text style="color:#1665dc; border-bottom: solid blue ;" @click="goJump" >确定</text>
                 
                </div>
<!-- 
                <el-pagination :small="small" :disabled="disabled" layout="prev, pager, next, jumper" :total="100"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->

                <div class="right">
                    每页
                    <el-select v-model="value" class="m-2" placeholder="10" size="small" style="width:50px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    条
                </div>

            </div>
        </div>

    </div>
</template>
<script>
import bingtu from './bingtu.vue'
import zhuzhuangtu from './zhuzhuangtu.vue'
import tiao from './tiaotu.vue'
import PageFooter from './PageFooter.vue'


export default {
    data() {
        return {

        }
    },
    components: {
        bingtu,
        zhuzhuangtu,
        tiao,
        PageFooter

    },
    methods: {
         goJump(){
            if(1){
                 this.$router.push({path:'/idcone'})
            }else{
                 this.$router.push({path:'/idcone'})
            }
            console.log('111')
            console.log(this.$router)
        }

    }
}



</script>

<style>

.container {
    background-color: #e7ebee;
}

.footer .number .right {
    display: flex;
    font-size: small;
    margin-left: 60px;
}

.footer .number .jump a {
    margin-left: 20px;
}

.footer .number .jump {
    display: flex;
    font-size: small;
    margin-left: 60px;
}

.footer .number text {
    font-size: small;
    margin: 0px 20px 0px 20px;
    /* padding: 0px 0px 0px 10px; */
}

.footer .number {
    display: flex;
    flex-direction: row;
    margin: 10px 10px 10px 200px;
    /* border: 1px solid red; */
}

.footer .left {
    display: flex;
    /* padding: 0px 0px 0px 10px; */
    font-size: small;
    margin-top: 10px;

}

.footer {
    padding-top: 10px;
    padding-bottom: 30px;
    /* border-bottom: 1px solid grey; */
    /* border-left:1px solid grey ; */
    /* border-right: 1px solid grey; */
    display: flex;
    flex-direction: row;
    background-color: #fff;


}


.FooterButton {
    margin-top: 20px;
    /* border: 1px solid grey; */
}



.body .tiaotu {
    display: flex;
    flex-direction: column;
    /* border: 1px solid grey; */
    margin-left: 10px;

}

.body .middle {
    display: flex;
    flex-direction: column;
    /* border: 1px solid grey; */
    margin-left: 10px;
}

.body .bingtu {
    display: flex;
    flex-direction: column;
    /* border: 1px solid grey; */

}

.body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.head {
    display: flex;
    /* flex-direction: row; */
    width: 1200px;
    height: 50px;
    /* border: 1px solid grey; */
    justify-content: space-between;
    margin-bottom: 10px;
    background-color: #fff;
}

.head .left {
    display: flex;
    /* border: 1px solid green; */
    margin: 10px;
    padding-left: 10px;

}

.head .right {
    display: flex;
    width: 600px;
    /* border: 1px solid blue; */

}

.head .right .data {
    display: flex;

    width: 400px;
    border: 1px solid black;
    display: flex;
    text-align: center;
    margin: 10px;

}

.head .right .data .title {
    display: flex;

    margin-right: 50px;
    padding-left: 100px;


}

.head .right .butt {
    display: flex;
    flex-direction: row;
    text-align: center;
    margin: 10px;

}

.head .right .butt button {
    background: #fff;
    margin-left: 10px;
    color: #1665dc;
    border: 1px solid black;
}
</style>